<template>
	<view class="order-page">
		<!-- 顶部导航栏 -->
		<view class="top-nav">
			<view class="nav-back" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="nav-title">我的订单</text>
			<view class="nav-placeholder"></view>
		</view>
		<!-- 标签栏 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{active: currentTab === 0}" @click="switchTab(0)">全部</view>
			<view class="tab-item" :class="{active: currentTab === 1}" @click="switchTab(1)">待支付</view>
			<view class="tab-item" :class="{active: currentTab === 2}" @click="switchTab(2)">待使用</view>
			<view class="tab-item" :class="{active: currentTab === 3}" @click="switchTab(3)">待评价</view>
		</view>
		<!-- 订单内容区域 -->
		<view class="order-content">
			<!-- 全部订单 -->
			<view class="tab-content" v-show="currentTab === 0">
				<!-- 全部-待评价状态订单 -->
				<navigator v-for="(item, index) in allOrders" :key="index" :url="getAllOrderUrl(item, 0)"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.status[0].statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: {{item.amount}}元</text>
							<view class="btn-group">
								<view class="btn" :class="{gray: item.status[0].btn1Disabled}">
									{{item.status[0].btn1Text}}
								</view>
								<view class="btn blue">{{item.status[0].btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<!-- 全部-已取消状态订单 -->
				<navigator v-for="(item, index) in allOrders" :key="index + 10" :url="getAllOrderUrl(item, 1)"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.status[1].statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: {{item.amount}}元</text>
							<view class="btn-group">
								<view class="btn blue">{{item.status[1].btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<!-- 全部-已退款状态订单 -->
				<navigator v-for="(item, index) in allOrders" :key="index + 20" :url="getAllOrderUrl(item, 2)"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.status[2].statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: {{item.amount}}元</text>
							<view class="btn-group">
								<view class="btn blue">{{item.status[2].btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<!-- 全部-已完成状态订单 -->
				<navigator v-for="(item, index) in allOrders" :key="index + 30" :url="getAllOrderUrl(item, 3)"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.status[3].statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: {{item.amount}}元</text>
							<view class="btn-group">
								<view class="btn blue">{{item.status[3].btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
			<!-- 待支付订单 -->
			<view class="tab-content" v-show="currentTab === 1">
				<navigator v-for="(item, index) in payOrders" :key="index"
					:url="'/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(item))"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: <text
									class="red">{{item.amount}}元</text></text>
							<view class="btn-group">
								<view class="btn gray">{{item.btn1Text}}</view>
								<view class="btn blue">{{item.btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator v-for="(item, index) in payOrders" :key="index + 10"
					:url="'/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(item))"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: <text
									class="red">{{item.amount}}元</text></text>
							<view class="btn-group">
								<view class="btn gray">{{item.btn1Text}}</view>
								<view class="btn blue">{{item.btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
			<!-- 待使用订单 -->
			<view class="tab-content" v-show="currentTab === 2">
				<navigator v-for="(item, index) in useOrders" :key="index"
					:url="'/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(item))"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: <text
									class="red">{{item.amount}}元</text></text>
							<view class="btn-group">
								<view class="btn gray">{{item.btn1Text}}</view>
								<view class="btn blue">{{item.btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator v-for="(item, index) in useOrders" :key="index + 10"
					:url="'/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(item))"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: <text
									class="red">{{item.amount}}元</text></text>
							<view class="btn-group">
								<view class="btn gray">{{item.btn1Text}}</view>
								<view class="btn blue">{{item.btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator v-for="(item, index) in useOrders" :key="index + 20"
					:url="'/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(item))"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: <text
									class="red">{{item.amount}}元</text></text>
							<view class="btn-group">
								<view class="btn gray">{{item.btn1Text}}</view>
								<view class="btn blue">{{item.btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
			<!-- 待评价订单 -->
			<view class="tab-content" v-show="currentTab === 3">
				<navigator v-for="(item, index) in evaluateOrders" :key="index"
					:url="'/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(item))"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: {{item.amount}}元</text>
							<view class="btn-group">
								<view class="btn gray">{{item.btn1Text}}</view>
								<view class="btn blue">{{item.btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator v-for="(item, index) in evaluateOrders" :key="index + 10"
					:url="'/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(item))"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: {{item.amount}}元</text>
							<view class="btn-group">
								<view class="btn gray">{{item.btn1Text}}</view>
								<view class="btn blue">{{item.btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator v-for="(item, index) in evaluateOrders" :key="index + 20"
					:url="'/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(item))"
					open-type="navigate">
					<view class="order-item">
						<view class="order-header">
							<text class="order-no">订单编号:{{item.orderNo}}</text>
						</view>
						<view class="order-info">
							<text class="service-item">服务项目: {{item.serviceItem}}</text>
							<text class="service-store">服务门店: {{item.store}} <text
									class="status">{{item.statusText}}</text></text>
							<text class="order-time">下单时间: {{item.orderTime}}</text>
						</view>
						<view class="order-amount">
							<text class="amount-text">{{item.amountType}}: {{item.amount}}元</text>
							<view class="btn-group">
								<view class="btn gray">{{item.btn1Text}}</view>
								<view class="btn blue">{{item.btn2Text}}</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				currentTab: 0, // 当前激活的标签索引
				statusBarHeight: 0, // 状态栏高度
				// 全部订单模拟数据
				allOrders: [{
					orderNo: '24255252522',
					serviceItem: '车辆保养',
					store: '大宝车辆维修店',
					orderTime: '2023-03-12 12:09',
					reserveTime: '2023-03-13 15:00',
					carInfo: '奔驰FWE4/豫A98FHJ',
					verifyCode: 'WE343235V',
					amount: 230.56,
					amountType: '实付',
					status: [{
							statusText: '待评价',
							btn1Text: '立即评价',
							btn2Text: '再来一单',
							btn1Disabled: false
						},
						{
							statusText: '已取消',
							btn2Text: '重新下单'
						},
						{
							statusText: '已退款',
							btn2Text: '再来一单'
						},
						{
							statusText: '已完成',
							btn2Text: '再来一单'
						}
					]
				}],
				// 待支付订单模拟数据
				payOrders: [{
					orderNo: '24255252522',
					serviceItem: '车辆保养',
					store: '大宝车辆维修店',
					orderTime: '2023-03-12 12:09',
					reserveTime: '2023-03-13 15:00',
					carInfo: '奔驰FWE4/豫A98FHJ',
					amount: 230.56,
					amountType: '应付',
					statusText: '待支付',
					btn1Text: '取消订单',
					btn2Text: '立即支付'
				}],
				// 待使用订单模拟数据
				useOrders: [{
					orderNo: '24255252525',
					serviceItem: '车辆保养',
					store: '大宝车辆维修店',
					orderTime: '2023-03-12 12:09',
					reserveTime: '2023-03-13 15:00',
					carInfo: '奔驰FWE4/豫A98FHJ',
					verifyCode: 'WE343235V',
					amount: 230.56,
					amountType: '实付',
					statusText: '待使用',
					btn1Text: '申请退款',
					btn2Text: '扫码结算'
				}],
				// 待评价订单模拟数据
				evaluateOrders: [{
					orderNo: '24255252528',
					serviceItem: '车辆保养',
					store: '大宝车辆维修店',
					orderTime: '2023-03-12 12:09',
					reserveTime: '2023-03-13 15:00',
					carInfo: '奔驰FWE4/豫A98FHJ',
					amount: 230.56,
					amountType: '实付',
					statusText: '待评价',
					btn1Text: '立即评价',
					btn2Text: '再来一单'
				}]
			}
		},
		onLoad(options) {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;


			// 如果传入了tab参数，则切换到对应的标签，否则默认显示全部（tab=0）
			if (options.tab !== undefined && options.tab !== null && options.tab !== '') {
				const tabIndex = parseInt(options.tab);
				if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex <= 3) {
					this.currentTab = tabIndex;
				} else {
					this.currentTab = 0; // 默认显示全部
				}
			} else {
				this.currentTab = 0; // 默认显示全部
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 切换标签
			switchTab(tabIndex) {
				this.currentTab = tabIndex;
			},
			// 生成全部订单的跳转URL（适配不同status状态）
			getAllOrderUrl(item, statusIndex) {
				const statusItem = item.status[statusIndex];
				const targetOrder = {
					...item,
					statusText: statusItem.statusText,
					btn1Text: statusItem.btn1Text || '',
					btn2Text: statusItem.btn2Text
				};
				return '/pages/my/orderDetail?orderData=' + encodeURIComponent(JSON.stringify(targetOrder));
			}
		}
	}
</script>

<style scoped>
	.order-page {
		background-color: #f8f8f8;
		min-height: 100vh;
	}


	.top-nav {
		background-image: url('/static/图层 1@3x.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		color: #fff;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		color: #fff;
		font-size: 48rpx;
		font-weight: 300;
		line-height: 1;
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	.nav-placeholder {
		width: 60rpx;
	}

	.tab-bar {
		display: flex;
		background-color: #2a6df6;
		color: #fff;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10px 0 8px;
		font-size: 16px;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 2px;
		background-color: #fff;
	}

	.order-content {
		padding: 10px;
	}

	.order-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.order-header {
		border-bottom: 1px solid #eee;
		padding-bottom: 8px;
		margin-bottom: 8px;
	}

	.order-no {
		font-size: 14px;
		color: #333;
	}

	.order-info {
		margin-bottom: 8px;
	}

	.service-item,
	.service-store,
	.order-time {
		display: block;
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.status {
		color: #2a6df6;
		float: right;
	}

	.order-amount {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.amount-text {
		font-size: 14px;
		color: #333;
	}

	.red {
		color: #f00;
	}

	.btn-group {
		display: flex;
	}

	.btn {
		padding: 5px 15px;
		border-radius: 4px;
		font-size: 14px;
		margin-left: 10px;
	}

	.blue {
		background-color: #2a6df6;
		color: #fff;
	}

	.gray {
		background-color: #ccc;
		color: #666;
	}

	/* 去除navigator默认样式 */
	navigator {
		text-decoration: none;
		display: block;
	}
</style>